<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:url value="/" var="baseUrl" />

<!DOCTYPE html>
<c:url value="/" var="baseUrl" />
<c:url value="/front/UploadDoc" var="url" />
<c:url value="/front/ListDoc" var="list" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
    <meta name="author" content="GeeksLabs">
    <meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
    <link rel="shortcut icon" href="${baseUrl}img/favicon.png">

    <title>Creative - Bootstrap Admin Template</title>

    <!-- Bootstrap CSS -->    
    <link href="${baseUrl}css/bootstrap.min.css" rel="stylesheet">
    <!-- bootstrap theme -->
    <link href="${baseUrl}css/bootstrap-theme.css" rel="stylesheet">
    <!--external css-->
    <!-- font icon -->
    <link href="${baseUrl}css/elegant-icons-style.css" rel="stylesheet" />
    <link href="${baseUrl}css/font-awesome.min.css" rel="stylesheet" />    
    <!-- full calendar css-->
    <link href="${baseUrl}assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
	<link href="${baseUrl}assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />
    <!-- easy pie chart-->
    <link href="${baseUrl}assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
    <!-- owl carousel -->
    <link rel="stylesheet" href="${baseUrl}css/owl.carousel.css" type="text/css">
	<link href="${baseUrl}css/jquery-jvectormap-1.2.2.css" rel="stylesheet">
    <!-- Custom styles -->
	<link rel="stylesheet" href="${baseUrl}css/fullcalendar.css">
	<link href="${baseUrl}css/widgets.css" rel="stylesheet">
    <link href="${baseUrl}css/style.css" rel="stylesheet">
    <link href="${baseUrl}css/style-responsive.css" rel="stylesheet" />
	<link href="${baseUrl}css/xcharts.min.css" rel=" stylesheet">	
	<link href="${baseUrl}css/jquery-ui-1.10.4.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
      <script src="js/lte-ie7.js"></script>
    <![endif]-->
    
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="${baseUrl}css/main.css">

<title>上传文件</title>
<script>
	window.onload = function() {
		var dropbox = document.getElementById("dropbox");
		dropbox.addEventListener("dragenter", noop, false);
		dropbox.addEventListener("dragexit", noop, false);
		dropbox.addEventListener("dragover", noop, false);
		dropbox.addEventListener("drop", dropUpload, false);
	}

	function noop(event) {
		event.stopPropagation();
		event.preventDefault();
	}

	function dropUpload(event) {
		noop(event);
		var files = event.dataTransfer.files;

		for (var i = 0; i < files.length; i++) {
			upload(files[i]);
		}
	}

	function upload(file) {
		document.getElementById("status").innerHTML = "Uploading " + file.name;

		var formData = new FormData();
		formData.append("file", file);

		var xhr = new XMLHttpRequest();
		xhr.upload.addEventListener("progress", uploadProgress, false);
		xhr.addEventListener("load", uploadComplete, false);
		xhr.open("POST", "${url}", true); // If async=false, then you'll miss progress bar support.
		xhr.send(formData);
	}

	function uploadProgress(event) {
		// Note: doesn't work with async=false.
		var progress = Math.round(event.loaded / event.total * 100);
		document.getElementById("status").innerHTML = "Progress " + progress
				+ "%";
	}

	function uploadComplete(event) {
		document.getElementById("status").innerHTML = event.target.responseText;
		//window.location.href="${list}";
	}
</script>
<style>
#dropbox {
	width: 300px;
	height: 200px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 5px;
	color: gray;
}
</style>

</head>
<body>
<!-- container section start -->
  <section id="container" class="">
     
      
      <header class="header dark-bg">
            <div class="toggle-nav">
                <div class="icon-reorder tooltips" data-original-title="Toggle Navigation" data-placement="bottom"></div>
            </div>

            <!--logo start-->
            <a href="MyChart" class="logo"><img src="../img/logo.png">山东电信宽带异常分析助手<span class="lite"></span></a>
            <!--logo end-->
 
            <div class="top-nav notification-row">                
                <!-- notificatoin dropdown start-->
                <ul class="nav pull-right top-menu">
                    
                    <!-- task notificatoin start -->
                                        <!-- task notificatoin end -->
                    <!-- inbox notificatoin start--><!-- inbox notificatoin end -->
                   
                    <!-- user login dropdown start-->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href=" ">
                        <span class="profile-ava">
                                <img alt="" src="${baseUrl}img/avatar1_small.jpg"> 
                                                           </span>
                            <span class="username">${curUser.city}:${curUser.account}
                            </span>
                            <b class="caret">
                            </b></a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            
                            <li>
                                <a href="${baseUrl}Login"><i class="icon_key_alt"></i> 退 出
                                </a>                           </li>
                      </ul>
                    </li>
                    <!-- user login dropdown end -->
                </ul>
                <!-- notificatoin dropdown end-->
            </div>

      </header>      
      <!--header end-->

      <!--sidebar start-->
      <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu">                
                  <li class="active">
                      <a class="" href="MyChart">
                          <i class="icon_house_alt"></i>
                          <span>主页</span>                      </a>                  </li>
				  <li >
                      <a class="" href="./ListSameMac" >
                          <i class="icon_document_alt"></i>
                          <span>虚拟拨号分析</span>   </a>                  </li> 								  
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="fa fa-edit"></i>宽带流量分析<span class="menu-arrow arrow_carrot-right"></span>                      </a>
                      <ul class="sub">
                          <li><a class="" href="ListAvgFlow">数据分析</a></li>
                          <li><a class="" href="Scatter">图表呈现</a></li>
                      </ul>
                  </li>
                  <li>
                      <a class="" href="ListSigData">
                          <i class="icon_genius"></i>
                          <span>SIG共享接入</span>                      </a>                  </li>
                   <li>
                      <a class="" href="ListTop10">
                          <i class="icon_piechart"></i>
                          <span>TOP10异常用户</span>                      </a>                  </li>          
                  <li>
                      <a class="" href="BWListAdmin">
                          <i class="icon_documents_alt"></i>
                          <span>黑白名单管理</span>                      </a>                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon_desktop"></i>
                          <span>后台管理</span>
                          <span class="menu-arrow arrow_carrot-right"></span>                      </a>
                      <ul class="sub">                          
                          <li><a class="" href="ListDoc">数据导入</a></li>                          
                          <li><a class="" href="blank.html">用户管理</a></li>
                      </ul>
                  </li>
              </ul>
              <!-- sidebar menu end-->
        </div>
      </aside>
      <!--sidebar end--><!-- container section start -->
  <section id="container" class="">
     
      
      <header class="header dark-bg">
            <div class="toggle-nav">
                <div class="icon-reorder tooltips" data-original-title="Toggle Navigation" data-placement="bottom"></div>
            </div>

            <!--logo start-->
            <a href="MyChart" class="logo"><img src="../img/logo.png">山东电信宽带异常分析助手<span class="lite"></span></a>
            <!--logo end-->
 
            <div class="top-nav notification-row">                
                <!-- notificatoin dropdown start-->
                <ul class="nav pull-right top-menu">
                    
                    <!-- task notificatoin start -->
                                        <!-- task notificatoin end -->
                    <!-- inbox notificatoin start--><!-- inbox notificatoin end -->
                   
                    <!-- user login dropdown start-->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href=" ">
                        <span class="profile-ava">
                                <img alt="" src="${baseUrl}img/avatar1_small.jpg"> 
                                                           </span>
                            <span class="username">${curUser.city}:${curUser.account}
                            </span>
                            <b class="caret">
                            </b></a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            
                            <li>
                                <a href="${baseUrl}Login"><i class="icon_key_alt"></i> 退 出
                                </a>                           </li>
                      </ul>
                    </li>
                    <!-- user login dropdown end -->
                </ul>
                <!-- notificatoin dropdown end-->
            </div>

      </header>      
      <!--header end-->

      <!--sidebar start-->
      <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu">                
                  <li class="active">
                      <a class="" href="MyChart">
                          <i class="icon_house_alt"></i>
                          <span>主页</span>                      </a>                  </li>
				  <li >
                      <a class="" href="./ListSameMac" >
                          <i class="icon_document_alt"></i>
                          <span>虚拟拨号分析</span>   </a>                  </li> 								  
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="fa fa-edit"></i>宽带流量分析<span class="menu-arrow arrow_carrot-right"></span>                      </a>
                      <ul class="sub">
                          <li><a class="" href="ListAvgFlow">数据分析</a></li>
                          <li><a class="" href="Scatter">图表呈现</a></li>
                      </ul>
                  </li>
                  <li>
                      <a class="" href="ListSigData">
                          <i class="icon_genius"></i>
                          <span>SIG共享接入</span>                      </a>                  </li>
                   <li>
                      <a class="" href="ListTop10">
                          <i class="icon_piechart"></i>
                          <span>TOP10异常用户</span>                      </a>                  </li>          
                  <li>
                      <a class="" href="BWListAdmin">
                          <i class="icon_documents_alt"></i>
                          <span>黑白名单管理</span>                      </a>                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon_desktop"></i>
                          <span>后台管理</span>
                          <span class="menu-arrow arrow_carrot-right"></span>                      </a>
                      <ul class="sub">                          
                          <li><a class="" href="ListDoc">数据导入</a></li>                          
                          <li><a class="" href="blank.html">用户管理</a></li>
                      </ul>
                  </li>
              </ul>
              <!-- sidebar menu end-->
        </div>
      </aside>
      <!--sidebar end-->
       <!--main content start-->
      <section id="main-content">
          <section class="wrapper">            
              <!--overview start-->
			     

	<div id="dropbox">把文件拖进来</div>
	<div id="status"></div>
	<p>${error.error}</p>
	<p>${error.file}</p>

	<a href="${list}">文件列表</a>
	
	</section>
      </section>
      <!--main content end-->
	<!--main content end-->
  </section>
  

<!--
	<form action="${url}" method="post" enctype="multipart/form-data">
		<table align="center">
			<caption>上传文件</caption>
			<tr>
				<td colspan="3" align="center">${error.error}</td>
			</tr>
			<tr>
				<th>文件：</th>
				<td><input type="file" name="file"/></td>
				<td>${error.file}</td>
			</tr>
			
			<tr>
				<td colspan="3" align="center"><input type="submit" value="确定" /></td>
			</tr>
		</table>
	</form>
-->

 <!-- javascripts -->
    <script src="${baseUrl}js/jquery.js"></script>
	<script src="${baseUrl}js/jquery-ui-1.10.4.min.js"></script>
    <script src="${baseUrl}js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="${baseUrl}js/jquery-ui-1.9.2.custom.min.js"></script>
    <!-- bootstrap -->
    <script src="${baseUrl}js/bootstrap.min.js"></script>
    <!-- nice scroll -->
    <script src="${baseUrl}js/jquery.scrollTo.min.js"></script>
    <script src="${baseUrl}js/jquery.nicescroll.js" type="text/javascript"></script>
    <!-- charts scripts -->
    <script src="${baseUrl}assets/jquery-knob/js/jquery.knob.js"></script>
    <script src="${baseUrl}js/jquery.sparkline.js" type="text/javascript"></script>
    <script src="${baseUrl}assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
    <script src="${baseUrl}js/owl.carousel.js" ></script>
    <!-- jQuery full calendar -->
    <<script src="${baseUrl}js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar -->
	<script src="${baseUrl}assets/fullcalendar/fullcalendar/fullcalendar.js"></script>
    <!--script for this page only-->
    <script src="${baseUrl}js/calendar-custom.js"></script>
	<script src="${baseUrl}js/jquery.rateit.min.js"></script>
    <!-- custom select -->
    <script src="${baseUrl}js/jquery.customSelect.min.js" ></script>
	<script src="${baseUrl}assets/chart-master/Chart.js"></script>
   
    <!--custome script for all page-->
    <script src="${baseUrl}js/scripts.js"></script>
    <!-- custom script for this page-->
    <script src="${baseUrl}js/sparkline-chart.js"></script>
    <script src="${baseUrl}js/easy-pie-chart.js"></script>
	<script src="${baseUrl}js/jquery-jvectormap-1.2.2.min.js"></script>
	<script src="${baseUrl}js/jquery-jvectormap-world-mill-en.js"></script>
	<script src="${baseUrl}js/xcharts.min.js"></script>
	<script src="${baseUrl}js/jquery.autosize.min.js"></script>
	<script src="${baseUrl}js/jquery.placeholder.min.js"></script>
	<script src="${baseUrl}js/gdp-data.js"></script>	
	<script src="${baseUrl}js/morris.min.js"></script>
	<script src="${baseUrl}js/sparklines.js"></script>	
	<script src="${baseUrl}js/charts.js"></script>
	<script src="${baseUrl}js/jquery.slimscroll.min.js"></script>
  <script>

      //knob
      $(function() {
        $(".knob").knob({
          'draw' : function () { 
            $(this.i).val(this.cv + '%')
          }
        })
      });

      //carousel
      $(document).ready(function() {
          $("#owl-slider").owlCarousel({
              navigation : true,
              slideSpeed : 300,
              paginationSpeed : 400,
              singleItem : true

          });
      });

      //custom select box

      $(function(){
          $('select.styled').customSelect();
      });
	  
	  /* ---------- Map ---------- */
	$(function(){
	  $('#map').vectorMap({
	    map: 'world_mill_en',
	    series: {
	      regions: [{
	        values: gdpData,
	        scale: ['#000', '#000'],
	        normalizeFunction: 'polynomial'
	      }]
	    },
		backgroundColor: '#eef3f7',
	    onLabelShow: function(e, el, code){
	      el.html(el.html()+' (GDP - '+gdpData[code]+')');
	    }
	  });
	});



  </script>
  
</body>
</html>